<template>
  <div class="announcement-container" @mouseenter="pauseAnimation" @mouseleave="resumeAnimation">
    <div class="header">
      <span class="icon">📢</span>
      <h3>社区动态公告</h3>
      <div class="progress-bar" :style="{ width: progress + '%' }"></div>
    </div>

    <div class="announcement-wrapper">
      <transition-group
        tag="ul"
        name="scroll"
        class="animated-list"
        @before-enter="beforeEnter"
        @after-enter="afterEnter">
        <li
          v-for="(item, index) in announcements"
          :key="item.id"
          :data-index="index"
          class="announcement-item"
          @click="handleClick(item)">
          <span class="tag" :style="getTagStyle(item.type)">{{ getTagLabel(item.type) }}</span>
          <div class="content">
            <p class="title">{{ item.title }}</p>
            <p class="time">{{ formatTime(item.createTime) }}</p>
          </div>
        </li>
      </transition-group>
    </div>

    <!-- 空状态 -->
    <div v-if="!announcements.length" class="empty-state">
<!--      <img src="@/assets/empty.svg" alt="暂无公告">-->
      <p>当前没有公告信息</p>
    </div>
  </div>
</template>

<script>
import { listInfo } from '@/api/Information/info'

export default {
  data() {
    return {
      announcements: [],
      currentIndex: 0,
      progress: 0,
      intervalId: null
    }
  },
  mounted() {
    this.fetchData()
    this.startProgress()
  },
  methods: {
    async fetchData() {
      try {
        const res = await listInfo({
          pageSize: 5,
          orderByColumn: 'create_time',
          isAsc: 'desc'
        })
        this.announcements = res.rows
      } catch (error) {
        this.$message.error('公告加载失败')
      }
    },
    getTagStyle(type) {
      const colors = {
        1: 'linear-gradient(135deg, #4CAF50, #81C784)', // 政策
        2: 'linear-gradient(135deg, #FF5722, #FF8A65)', // 紧急
        3: 'linear-gradient(135deg, #2196F3, #64B5F6)'  // 活动
      }
      return {background: colors[type] || '#999'}
    },
    getTagLabel(type) {
      const labels = {
        1: '政策公告',
        2: '紧急通知',
        3: '社区活动'
      }
      return labels[type] || '公告'
    },
    formatTime(time) {
      return new Date(time).toLocaleDateString()
    },
    handleClick(item) {
      this.$emit('show-detail', item)
    },
    startProgress() {
      this.intervalId = setInterval(() => {
        this.progress = (this.progress + 1) % 101
        if (this.progress === 100) {
          this.currentIndex = (this.currentIndex + 1) % this.announcements.length
        }
      }, 100)
    },
    pauseAnimation() {
      clearInterval(this.intervalId)
      this.progress = 0
    },
    resumeAnimation() {
      this.startProgress()
    },
    beforeEnter(el) {
      el.style.opacity = 0
      el.style.transform = 'translateY(30px)'
    },
    afterEnter(el) {
      el.style.opacity = 1
      el.style.transform = 'translateY(0)'
    }
  }
}
</script>

<style scoped>
.announcement-container {
  background: linear-gradient(145deg, #ffffff, #f8f9fa);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.announcement-container:hover {
  transform: translateY(-5px);
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}

.icon {
  font-size: 28px;
  margin-right: 12px;
}

h3 {
  margin: 0;
  color: #2c3e50;
  font-weight: 600;
}

.progress-bar {
  position: absolute;
  bottom: -10px;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #2196F3, #64B5F6);
  transition: width 0.1s linear;
}

.announcement-wrapper {
  height: 260px;
  overflow: hidden;
  position: relative;
}

.animated-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.announcement-item {
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.announcement-item:hover {
  transform: translateX(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tag {
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  margin-right: 15px;
  flex-shrink: 0;
}

.content {
  flex-grow: 1;
}

.title {
  margin: 0;
  color: #34495e;
  font-weight: 500;
}

.time {
  margin: 5px 0 0;
  color: #7f8c8d;
  font-size: 12px;
}

.empty-state {
  text-align: center;
  padding: 40px 0;
}

.empty-state img {
  width: 120px;
  opacity: 0.6;
  margin-bottom: 20px;
}

.empty-state p {
  color: #95a5a6;
  margin: 0;
}

.scroll-enter-active {
  transition: all 0.5s ease;
}

.scroll-leave-active {
  transition: all 0.5s ease;
  position: absolute;
}

.scroll-enter {
  opacity: 0;
  transform: translateY(30px);
}

.scroll-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}
</style>
